<template>
  <div class="not-found">
    <!-- 装饰性背景元素 -->
    <div class="decoration-bg">
      <div class="floating-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
      </div>
    </div>

    <div class="content">
      <div class="error-container">
        <div class="error-code">
          <span class="code-digit">4</span>
          <div class="zero-container">
            <div class="zero">0</div>
            <div class="zero-mirror">0</div>
          </div>
          <span class="code-digit">4</span>
        </div>

        <div class="error-illustration">
          <div class="search-illustration">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
              <path d="M20 20L17 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
        </div>

        <h2 class="message-title">页面走丢了...</h2>
        <p class="message">抱歉，您访问的页面不存在或已被移除。<br>请检查URL是否正确，或尝试返回首页。</p>

        <div class="actions">
          <el-button type="primary" size="large" @click="goHome" class="action-btn home-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
              <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>
            返回首页
          </el-button>
          <el-button size="large" @click="refresh" class="action-btn refresh-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="23 4 23 10 17 10"></polyline>
              <polyline points="1 20 1 14 7 14"></polyline>
              <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
            </svg>
            刷新页面
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

const goHome = () => router.push('/')
const refresh = () => window.location.reload()
</script>

<style lang="scss" scoped>
.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, $login-color-primary 0%, $login-color-secondary 100%);
  background-attachment: fixed;
  position: relative;
  overflow: hidden;

  // 装饰性背景
  .decoration-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;

    .floating-shapes {
      position: absolute;
      width: 100%;
      height: 100%;

      .shape {
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        animation: float 6s ease-in-out infinite;

        &.shape-1 {
          width: 80px;
          height: 80px;
          top: 20%;
          left: 10%;
          animation-delay: 0s;
        }

        &.shape-2 {
          width: 120px;
          height: 120px;
          top: 60%;
          right: 15%;
          animation-delay: 1s;
        }

        &.shape-3 {
          width: 60px;
          height: 60px;
          bottom: 20%;
          left: 20%;
          animation-delay: 2s;
        }
      }
    }
  }

  .content {
    position: relative;
    z-index: 1;
    animation: fadeIn 0.8s ease;
    width: 100%;
    max-width: 800px;
    padding: 40px;
  }

  .error-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 60px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.8s ease;

    .error-code {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-bottom: 30px;

      .code-digit {
        font-size: 120px;
        font-weight: 900;
        color: $primary-color;
        line-height: 1;
        animation: bounce 2s ease-in-out infinite;
        text-shadow: 0 4px 12px rgba(96, 122, 251, 0.3);

        &:first-child {
          animation-delay: 0s;
        }

        &:last-child {
          animation-delay: 0.4s;
        }
      }

      .zero-container {
        position: relative;
        width: 100px;
        height: 100px;

        .zero {
          font-size: 120px;
          font-weight: 900;
          color: $secondary-color;
          line-height: 1;
          animation: pulse 2s ease-in-out infinite;
          text-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
        }

        .zero-mirror {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 120px;
          font-weight: 900;
          color: rgba(96, 122, 251, 0.2);
          line-height: 1;
          transform: scaleX(-1);
          mask: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
          animation: pulse 2s ease-in-out infinite;
          animation-delay: 0.2s;
        }
      }
    }

    .error-illustration {
      display: flex;
      justify-content: center;
      margin: 20px 0 30px;

      .search-illustration {
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, rgba(96, 122, 251, 0.1), rgba(118, 75, 162, 0.1));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: float 3s ease-in-out infinite;

        .search-icon {
          width: 60px;
          height: 60px;
          color: $primary-color;
          animation: rotate 8s linear infinite;
        }
      }
    }

    .message-title {
      font-size: 32px;
      color: $text-color-primary;
      margin: 0 0 20px;
      font-weight: 600;
    }

    .message {
      font-size: 16px;
      color: $text-color-secondary;
      margin: 0 0 40px;
      line-height: 1.8;
    }

    .actions {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;

      .action-btn {
        padding: 14px 32px;
        font-size: 16px;
        border-radius: 12px;
        font-weight: 500;
        transition: all 0.3s ease;

        &.home-btn {
          background: linear-gradient(135deg, $primary-color, $secondary-color);
          border: none;
          box-shadow: 0 4px 15px rgba(96, 122, 251, 0.3);

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(96, 122, 251, 0.4);
          }

          &:active {
            transform: translateY(0);
          }
        }

        &.refresh-btn {
          &:hover {
            transform: translateY(-2px);
          }

          &:active {
            transform: translateY(0);
          }
        }

        // 针对 el-button 内部内容设置样式
        :deep(.el-button__content) {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        // 直接给 svg 添加左边距
        :deep(svg) {
          margin-right: 12px;
          flex-shrink: 0;
        }
      }
    }
  }

  // 动画定义
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }

    50% {
      transform: scale(1.05);
      opacity: 0.8;
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-20px);
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

// 夜间模式样式
@media (prefers-color-scheme: dark) {
  .not-found {
    background: linear-gradient(135deg, #1e1b2e 0%, #2d1b4e 100%);

    .decoration-bg {
      .floating-shapes {
        .shape {
          background: rgba(139, 92, 246, 0.15);
        }
      }
    }

    .error-container {
      background: rgba(31, 41, 55, 0.95);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

      .error-code {
        .code-digit {
          color: #a78bfa;
          text-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
        }

        .zero-container {
          .zero {
            color: #8b5cf6;
            text-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
          }

          .zero-mirror {
            color: rgba(167, 139, 250, 0.2);
          }
        }
      }

      .error-illustration {
        .search-illustration {
          background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(139, 92, 246, 0.15));

          .search-icon {
            color: #a78bfa;
          }
        }
      }

      .message-title {
        color: $text-color-primary-dark;
      }

      .message {
        color: $text-color-secondary-dark;
      }
    }
  }
}
</style>
